<template>
  <div>

    <FuncSearch @add-func="addFunc"
                v-model="search"
                @search="page=1; queryAllFunc()"
                @batch-remove="batchRemove"/>

    <!--  通过表格的展开事件，触发一个动作   -->
    <Table ref="funcTable" border :columns="columns" :data="data"
           @on-selection-change="selection = $event">
      <template #name="{ row }">
        <strong>{{ row.funcName }}</strong>
      </template>

      <template #action="{ row, index }">
        <Button v-auth:func:add:btn type="success" icon="md-add-circle" size="small" style="margin-right: 5px" @click="addBtn(row)">添加按钮
        </Button>
        <Button v-auth:func:update type="primary" icon="ios-create-outline" size="small" style="margin-right: 5px" @click="editFunc(row)">
          修改
        </Button>
        <Button v-auth:func:delete type="error" icon="ios-remove-circle-outline" size="small" @click="remove(row,index)">移除</Button>
      </template>

      <template #status="{ row, index }">
        <DotTag type="primary" v-if="row.state">正常</DotTag>
        <DotTag type="error" v-else>失效</DotTag>
      </template>

      <template #footer>
        <div style="min-width: 300px; max-width: 380px;">
          <van-pagination v-model="page" :total-items="total"
                          :items-per-page="pageSize" @page-click="queryAllFunc"
                          :show-page-size="5" force-ellipses/>
        </div>
      </template>

    </Table>


    <Drawer
        :title="drawer.title"
        v-model="drawer.state"
        width="420"
        :mask-closable="false"
        @on-close="closeWin(false)"
        :styles="{height: 'calc(100% - 55px)',overflow: 'auto',paddingBottom: '53px',position: 'static'}">
      <FuncForm @close-win="closeWin" ref="func" :drawer="drawer.row"></FuncForm>
    </Drawer>

    <!--  引入 btn 管理组件  refresh-btn 通知刷新按钮列表 -->
    <BtnForm ref="btnForm" v-model="btnWin" :func="drawer.func" @refresh-btn="handleRefresh"></BtnForm>

  </div>
</template>
<script>
import FuncForm from '../components/func/FuncForm.vue'
import BtnForm from '../components/func/BtnForm.vue'
import FuncSearch from "../components/func/FuncSearch.vue";
import BtnList from '../components/func/BtnList.vue'
import DotTag from '../components/DotTag.vue'
import VanPagination from '../components/VanPagination.vue'

export default {
  data() {
    return {
      drawer: {
        state: false,
        title: "",
        row: {funcName: "", url: "", remark: "", sorted: 1, state: true},
        func: {id: "", funcName: "", remark: ""},  // 绑定按钮选中的功能
      },
      btnWin: false,
      page: 1,
      total: 0,
      pageSize: 14,
      selection: [],
      search: {}, // 存储要搜索的数据
      columns: [
        {
          type: 'expand',
          width: 50,
          render: (h, {row}) => {
            return h(BtnList, {ref: "btnList" + row.id, func: {id: row.id, funcName: row.funcName, remark: row.remark}})
          }
        },
        {
          type: 'selection',
          width: 60,
          align: 'center'
        },
        {
          title: '功能名',
          slot: 'name',
          width: 200,
        },
        {
          title: '路由地址',
          key: 'url'
        },
        {
          title: '所属菜单',
          key: 'menuNames',
          width: 240,
        },
        {
          title: '顺序',
          key: 'sorted',
          width: 100,
          align: "center",
        },
        {
          title: '权限标记',
          key: 'remark',
          width: 180,
        },
        {
          title: '状态',
          slot: 'status',
          width: 100,
          align: "center",
        },
        {
          title: '操作',
          slot: 'action',
          width: 280,
          align: 'center'
        }
      ],
      data: [],
      refresh: {}, // // 定义一个响应式数据，用来控制 刷新指定的内容， 需要式一个对象，否则子组件无法获取响应式操作
    }
  },
  created() {
    this.queryAllFunc();
  },
  provide() {   // 通过 再 父组件中定义 provide 暴漏 数据给 子组件
     return {
       // 推荐使用一个唯一值
       [Symbol.for("funcView")]: this.refresh // 将刷新状态暴漏给所有子组件
     }
  },
  methods: {
    handleRefresh(funcId) {
      this.refresh[`state-${funcId}`] = true ;
    },
    queryAllFunc() {
      this.$api.queryAllFunc({page: this.page, rows: this.pageSize, ...this.search}).then(ret => {
        if (ret.data.status) {
          this.data = ret.data.data.list;
          this.total = ret.data.data.total;
        }
      })
    },
    addFunc() {
      this.drawer.state = true;
      this.drawer.title = "添加功能";
      this.drawer.row = {funcName: "", url: "", remark: "", sorted: 1, state: true}
    },
    batchRemove() {
      if (this.selection.length === 0) {
        this.$tips.warning("请至少选中一个需要删除的菜单");
      } else {
        this.$tips.confirm("您确定要删除该菜单吗?").then(() => {
          // 删除多个菜单
          this.$api.batchDelFunc(this.selection.map(menu => menu.id)).then(ret => {
            if (ret.data.status) {
              this.$tips.success("批量删除成功");
              this.queryAllFunc();
            }
          })
        })
      }
    },
    editFunc(row) {
      this.drawer.state = true;
      this.drawer.title = "修改功能";
      this.drawer.row = {...row};
    },

    remove(row, index) {
      this.$tips.confirm("您确定要删除该功能吗?").then(() => {
        this.$api.delFunc(row.id).then(ret => {
          this.$tips.success("删除成功");
          this.queryAllFunc();
        })
      })
    },

    addBtn(row) {
      this.refresh.state = false  // 还原数据
      this.refresh.rowId = null ;

      this.$refs.btnForm.resetValidForm();
      this.btnWin = true;
      this.drawer.func = {...row};
    },
    closeWin(status) {
      this.drawer.state = false;
      this.$refs.func.resetValidForm();
      if (status) this.queryAllFunc(); // 刷新表格
    }
  },
  components: {
    FuncSearch,
    FuncForm,
    BtnForm,
    DotTag,
    VanPagination,
    BtnList
  }
}
</script>

<style>

td.ivu-table-expanded-cell {
  padding: 5px 10px;
}
</style>
